<template>
	<div class="header-fixed-top">
		<transition-group v-if='!eightList ? false : true' enter-active-class='animated fadeIn'>
			<router-link 
						tag='div' 
						v-for='item of eightList' 
						:key='item._id' 
						class="eight-list" 
						:class="{ eight_list_active: eightAct == item._id }"
						@touchstart.native='eightTouchstart(item._id)'
						@touchend.native='eightTouchend()'
						:to="'/detail/' + item._id + '/eight'"
			>
				<div class="l-l">
					<p class="list-title">
						{{item.list_title}}
					</p>
					<p class="list-info">
						{{item.list_info}}
					</p>
					<p class="list-author">
						<span class="iconfont user-icon">
							&#xe614;
						</span>
						{{item.list_user}}
						<span class="iconfont user-comm">
							&#xe61f;
						</span>
						{{item.list_comments.length}}
					</p>
				</div>
				<div class="l-r">
					<div class="l-r-top">
						<img class="l-r-top-img" :src="item.list_userimg" />
					</div>
				</div>
			</router-link>
		</transition-group>
	</div>
</template>

<script>
	export default {
		name: 'eight-list',
		props: {
			eightList: Array
		},
		data () {
			return {
				eightAct: ''
			}
		},
		methods: {
			eightTouchstart (eight_xb) {
				this.eightAct = eight_xb
			},
			eightTouchend () {
				this.eightAct = false
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.eight-list
		border-bottom:1px #F0F0F0 solid
		background:#fff
		padding:6px 6px 0 6px
		display:flex
		flex-direction:row
	.eight-list:nth-child(1)
		margin-top:-20px
	.l-l
		width:502px
		overflow:hidden
		.list-title
			color:#494949
			font-size:32px
			margin:30px 0 0 22px
			line-height:44px
			display: -webkit-box
			-webkit-line-clamp: 1
			overflow:hidden
			text-overflow:ellipsis
			-webkit-box-orient: vertical
		.list-info
			color:#aaa
			font-size:24px
			display: -webkit-box
			-webkit-line-clamp:1
			overflow:hidden
			text-overflow:ellipsis
			letter-spacing:1px
			margin:14px 0 0 22px	
			line-height:40px
			-webkit-box-orient: vertical
		.list-author
			margin:24px 0 30px 22px
			color:#aaa
			font-size:24px
			.user-icon,.user-comm
				font-size:24px
				color:#aaa
			.user-comm
				font-size:22px
				margin-left:30px
	.l-r
		width:246px
		position:relative	
		.l-r-top
			width:200px
			margin-top:32px
			float:right
			margin-right:24px	
			.l-r-top-img
				width:100%
				border-radius:8px
	.eight_list_active
		background-color:#F1F1F1
</style>
